<template>
  <Echarts
    id="echarts"
    height="500px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const xDataArr = [
    "张三",
    "李四",
    "王五",
    "闰土",
    "小明",
    "茅台",
    "二妞",
    "大强",
  ]; // 准备x轴数据
  const yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]; // 为x轴每一个元素指明数据
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    yAxis: {
      type: "value",
    },
    xAxis: {
      type: "category",
      data: xDataArr,
    },
    series: [
      {
        name: "语文",
        type: "bar",
        markPoint: {
          // 标记点
          data: [
            {
              type: "max",
              name: "最大值",
            },
            {
              type: "min",
              name: "最小值",
            },
          ],
        },
        markLine: {
          // 标记线
          data: [
            {
              type: "average",
              name: "平均值",
            },
          ],
        },
        label: {
          // 柱状图上的文字设置
          show: true, // 是否显示
          rotate: 60, // 旋转角度
          position: "top", // 显示位置
        },
        barWidth: "30%", // 柱的宽度
        data: yDataArr,
      },
    ],
  };
});
</script>